<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li:nth-of-type(1) {
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- <ul>
        <li>1111111</li>
        <li>2222222</li>
        <li>3333333</li>
        <li>4444444</li>
        <li>5555555</li>
    </ul>

    <ol>
        <li>66666666</li>
        <li>77777777</li>
        <li>88888888</li>
        <li>99999999</li>
        <li>00000000</li>
    </ol> -->
    <div class="box">
        <img src="img/0.JPG" alt="">
        <img src="img/0.JPG" alt="">
        <img src="img/mh.JPG" alt="">
        <img src="img/0.JPG" alt="">
        <img src="img/0.JPG" alt="">
        <img src="img/mh.JPG" alt="">
        <img src="img/0.JPG" alt="">
        <img src="img/0.JPG" alt="">
    </div>

</body>

</html>
<script>
    // 一.获取元素对象 - 获取标签
    // 1.获取单个元素 - document.querySelector('css选择器')
    // 如果获取的是多个元素，取第一个。
    // console.log(document.querySelector('ul li:nth-of-type(1)'));
    // console.log(document.querySelector('ul li'));
    // console.log(document.querySelector('ol li'));

    // 2.获取多个元素 - document.querySelectorAll('css选择器') 
    // 返回类数组。
    // 拥有length和下标获取对应的元素。
    // console.log(document.querySelectorAll('li')[0]);
    // console.log(document.querySelectorAll('li').length); //10
    // console.log(document.querySelectorAll('ul li').length); //5

    // var list = document.querySelectorAll('ul li'); //获取5个li元素
    // console.log(list[0].innerHTML); //1111111

    // 二.应用 - 图片时间
    function double(n) {
        return n < 10 ? '0' + n : n;
    }

    function imgTime() {
        //1.获取8张图片
        var imgs = document.querySelectorAll('.box img');
        //2.获取时分秒。
        var date = new Date();
        var time = double(date.getHours()) + ':' + double(date.getMinutes()) + ':' + double(date.getSeconds()); //14:56:10
        //  1    4   :   5   6   :   1   0
        // [img,img,img,img,img,img,img,img,]
        for (var i = 0; i < imgs.length; i++) {
            if (i === 2 || i === 5) {
                imgs[i].src = 'img/mh.JPG';
            } else {
                imgs[i].src = 'img/' + time[i] + '.JPG';
            }
        }
    }
    imgTime();
    window.setInterval(imgTime, 1000);
</script>